<template>
	<view class="verification pt10">
		<view class="card shop pl10 pr10">
			<!-- <view class="shop-title">服务门店</view> -->
			<view class="shop-container">
				<view class="img">
					<image mode="aspectFill" :src="$wanlshop.oss(store.store_avatar, 0, 88)" />
				</view>
				<view class="shop-content">
					<view class="stop-name">{{ store.store_name }}</view>
					<view class="stop-descript">{{ store.description }}</view>
					<view class="stop-address">{{ store.address }}</view>
				</view>
			</view>
		</view>
		<view class="card shop pl10 pr10">
			<view class="order-qrcode w100P">
				<!-- 商品 -->
				<view class="img-info w100P">
					<view class="img">
						<image mode="aspectFill" style="width: 140rpx;height: 140rpx"
							:src="$wanlshop.oss(order_goods.image)" />
					</view>
					<view class="info">
						<view class="title-pice">
							<view class="title">{{ order_goods.title }}</view>
							<view class="pice">{{ order_goods.price }}</view>
						</view>
						<view class="dis-unit">
							<view class="dis">{{ order_goods.difference }}</view>
							<view class="unit">x1</view>
						</view>
						<view class="tabs-use" style="display: flex;">
							<scroll-view scroll-x="true"
								style="flex: 1; display: flex; align-items: center;padding-right: 4rpx;">
								<view class="tags" v-if="store.tag">
									<view class="tag" v-for="(child, key) in (store.tag ? store.tag : '').split(',')"
										:key="key">{{ child }}</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="underline w100P mt5 mb5"></view>
				<!-- 服务 -->
				<view class="img-info w100P" v-if="order_goods.store_service">
					<!-- <view class="img" :style="{ backgroundImage: 'url(' + $wanlshop.oss(order_goods.store_service.show_image, 70, 70) + ')'}">
          </view> -->
					<view class="img">
						<image mode="aspectFill" style="width: 140rpx;height: 140rpx"
							:src="$wanlshop.oss(order_goods.store_service.show_image)" />
					</view>
					<view class="info">
						<view class="title-pice">
							<view class="title">{{ order_goods.store_service.name }}</view>
							<view class="pice">{{ order_goods.store_service.unit_price }}</view>
						</view>
						<view class="dis-unit">
							<view class="dis">{{ order_goods.store_service.desc }}</view>
							<view class="unit">x{{ order_goods.store_service.quantity }}</view>
						</view>
					</view>
				</view>
				<view class="underline w100P mt5 mb5"></view>
				<!-- 8号技师 -->
				<radio-group @change="radio_change" class="w100P">
					<view class="w100P mb10" v-for="(item, index) in storeStaffList" :key="`storeStaffList-${index}`">
						<view class="img-info w100P"
							:style="item.show ? '' : 'height: 0rpx !important;margin: 0rpx;overflow: hidden;'">
							<view class="flex w100P">
								<view class="img">
									<image mode="aspectFill" style="width: 140rpx;height: 140rpx"
										:src="$wanlshop.oss(item.avatar_img)" />
								</view>
								<view class="info flex flex-middle">
									<view class="title-pice">
										<view class="title">{{ item.name }}</view>
									</view>
									<view>
										<radio :checked="item.checked" :value="item.id"
											activeBackgroundColor="#fd8c00" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</radio-group>
				<view class="flex flex-middle flex-center gray-font" v-if="storeStaffList && storeStaffList.length > 1">
					<view @click="showMore">选择更多技师</view>
					<uni-icons @click="showMore" v-if="more === 'down'" color="#999" class="ml5 gray-font" type="down"
						size="40rpx"></uni-icons>
					<uni-icons @click="showMore" v-else color="#999" class="ml5 gray-font" type="up"
						size="40rpx"></uni-icons>
				</view>
			</view>
		</view>

		<view class="card rules" v-if="order_goods.booking.remarks">
			<view class="label-text remark">
				<view class="label">订单备注</view>
				<view class="text">
					<text>{{ order_goods.booking.remarks }}</text>
				</view>
			</view>
		</view>

		<view class="card rules">
			<view class="label-text order-num">
				<view class="label">订单编号：</view>
				<view class="text">
					<text>{{ order.order_no }}</text>
					<!-- <view class="copy" @tap="copyOrder(order.order_no)">复制</view> -->
				</view>
			</view>
			<view class="label-text">
				<view class="label">订单时间：</view>
				<view class="text">
					<text>{{ order.paymenttime_text }}</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">购买产品：</view>
				<view class="text">
					<text>{{ order_goods.title }}</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">支付状态：</view>
				<view class="text">
					<text>已支付</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">预约时间：</view>
				<view class="text">
					<text>{{ order_goods.booking_time }}</text>
				</view>
			</view>
		</view>


		<view class="footer flex flex-middle flex-center">
			<button class="submit" @tap="confirmVerification">确认核销</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'verification',
		data() {
			return {
				code: '',
				orderid: '',
				formData: {},
				store: {},
				order: {},
				order_goods: {},
				storeStaffList: [],
				more: 'down'
			}
		},
		onLoad(option) {
			function __param2Obj__(url) {
				if (!url) {
					return {}
				}
				return JSON.parse('{"' + decodeURIComponent(url).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,
					'":"').replace(/\+/g, ' ') + '"}')
			}
			if (option.scene) { // 从二维码那边进来
				let q = decodeURIComponent(option.scene)
				let query = __param2Obj__(q)
				if (!uni.getStorageSync("wanlshop:user").token) { // 用户未登录
					uni.navigateTo({
						url: `/pages/user/auth/name?code=${query.code}&orderid=${query.orderid}`
					})
				} else {
					if (query.code && query.orderid) { // 从二维码那边进来
						this.orderid = query.orderid
						this.code = query.code
						this.getInfo()
					} else {
						console.log('非法进入')
					}
				}
			} else {
				if (option.code && option.orderid) { // 从登录那边过来
					this.orderid = option.orderid
					this.code = option.code
					this.getInfo()
				} else {
					console.log('非法进入')
				}
			}
		},
		methods: {
			confirmVerification() {
				let store_staff_id = this.storeStaffList.find(item => item.checked)?.id
				if (!store_staff_id) {
					return uni.showToast({
						title: '请选择一位技师',
						icon: 'none',
						duration: 2000
					});
				}
				this.$api.post({
					url: '/wanlshop/store/serviceValidation',
					data: {
						store_staff_id: store_staff_id,
						service_code: this.code
					},
					success: res => {
						uni.showToast({
							title: '核销成功',
							duration: 2000,
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url: `/pages/user/auth/verificationSuccess?code=${this.code}&orderid=${this.orderid}&store_staff_id=${store_staff_id}`
							})
						}, 1000)
					}
				});
			},
			showMore() {
				if (this.more === 'down') {
					this.more = 'up'
					this.storeStaffList.forEach((item, index) => {
						this.$set(this.storeStaffList[index], 'show', true)
					})
				} else {
					this.more = 'down'
					this.storeStaffList.forEach((item, index) => {
						this.$set(this.storeStaffList[index], 'show', false)
					})
					this.$set(this.storeStaffList[0], 'show', true)
				}
			},
			getInfo() {
				this.$api.get({
					url: '/wanlshop/store/serviceDetail',
					data: {
						order_id: this.orderid,
						code: this.code
					},
					success: res => {
						if (res.order_goods.service_status == 3 || res.order_goods.service_status == 5) {
							uni.showToast({
								title: '核销码已使用',
								icon: 'none',
								mask: true,
								success: () => {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index'
										})
									}, 1000)
								}
							})
							return;
						}
						
						if (res.order_goods.service_status == 4) {
							uni.showToast({
								title: '服务已取消',
								icon: 'none',
								mask: true,
								success: () => {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index'
										})
									}, 1000)
								}
							})
							return;
						}

						this.store = res.store.find(item => item.id === res.order_goods.store_id)
						this.order = res.order
						this.order_goods = res.order_goods
						this.getStoreStaffList()
					},
					fail: res => {
						if (res?.data?.msg === '没有操作权限:001') {
							uni.showToast({
								title: '没有操作权限',
								icon: 'none',
								mask: true,
								success: () => {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index'
										})
									}, 1000)
								}
							})
						}
					}
				});
			},
			async getStoreStaffList() {
				let res = await this.$api.get({
					url: "/wanlshop/store/staff",
					data: {
						store_id: this.order_goods?.store_id,
					},
				});
				if (res) {
					if (res.length > 0) {
						res[0].show = true
					}
					this.storeStaffList = res
				}
			},
			// 单选框 选择店铺
			radio_change(e) {
				let id = +e.detail.value
				let index = this.storeStaffList.findIndex(item => +item.id === id)
				this.storeStaffList.forEach((item, index) => {
					this.$set(this.storeStaffList[index], 'checked', false)
				})
				this.$set(this.storeStaffList[index], 'checked', true)
				console.log(this.storeStaffList)
			},
			// 复制
			copyOrder(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.verification {
		min-height: 100vh;
		background: $page-color-base;
		padding: 0 15rpx 120rpx 15rpx;

		.card {
			background: #fff;
			border-radius: 12rpx;
			padding: 25rpx;
			margin-bottom: 20rpx;
		}

		.shop {
			.shop-title {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.shop-container {
				display: flex;
				align-items: center;
				height: auto;

				.img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						border-radius: 6rpx;
						width: 100%;
						height: 100%;
					}
				}

				.shop-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 26rpx;
					color: $font-color-dark;

					.stop-name {
						font-weight: 500;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.stop-descript {
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}

					.stop-address {
						color: #ccc;
						flex: 1;
						font-size: 24rpx;
					}

					.btn {
						display: flex;
						align-items: center;

						.phone-btn,
						.addr-btn {
							font-size: 20rpx;
							padding: 3rpx 10rpx;
							border: 1rpx solid #000;
							border-radius: 10rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.order-qrcode {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tips {
				font-size: 28rpx;
				color: rgba(red, 0.5);
				margin-bottom: 10rpx;
			}

			.qrcode {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 20rpx;
			}

			.code {
				font-weight: 600;
				font-size: 48rpx;
				color: #000;
				margin-bottom: 15rpx;
			}

			.code-time {
				font-size: 24rpx;
				color: #ccc;
				margin-bottom: 25rpx;
			}
		}

		.rules {
			.label-text {
				display: flex;

				&.remark {
					flex-direction: column;
					gap: 10rpx;
				}

				&.order-num {
					align-items: center;

					.text {
						align-items: center;
						display: flex;

						.copy {
							margin-left: 20rpx;
							font-size: 18rpx;
							background: rgba(#999, 0.5);
							padding: 3rpx 8rpx;
							border-radius: 5rpx;
							color: #333;
						}
					}
				}

				.label,
				text {
					line-height: 40rpx;
					color: #000;
					font-size: 24rpx;
				}

			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			padding: 20rpx;
		}

		.underline {
			margin: 20rpx 0;
		}

		.img-info {
			display: flex;
			align-items: center;

			.img {
				width: 78px;
				height: 78px;
				margin-right: 5px;
				border-radius: 6px;
				overflow: hidden;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				image {
					border-radius: 6px;
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;

				.title-pice,
				.dis-unit,
				.tags {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.tags {
					width: 315rpx;
					word-break: keep-all;
				}

				.title-pice {
					font-size: 26rpx;

					.title {
						font-family: PingFang SC;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						color: #3d3d3d;
					}

					.pice {
						font-family: PingFang SC;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						/* 字体标准黑色 */
						color: #3d3d3d;
					}


				}

				radio {
					transform: scale(0.8);
				}

				.dis-unit {
					margin: 8px 0 10px 0;

					.dis {
						font-family: PingFang SC;
						font-size: 12px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						/* 次要信息 */
						color: #BCBCBC;
					}

					.unit {
						font-family: PingFang SC;
						font-size: 12px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						color: #6A6A6A;
					}
				}

				.tags {
					justify-content: flex-start;

					.tag {
						border-radius: 2px;
						opacity: 1;
						box-sizing: border-box;
						border: 0.6px solid $theme;
						font-family: PingFang SC;
						font-size: 10px;
						font-weight: normal;
						line-height: normal;
						font-variation-settings: "opsz" auto;
						color: $theme;
						padding: 0 4px;
						margin-right: 4px;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}

		.submit {
			font-size: 28rpx;
			background-color: $theme;
			height: 80rpx;
			border-radius: 80rpx;
			line-height: 80rpx;
			width: 100%;
			text-align: center;
			color: #fff;
		}
	}
</style>